<!--
 * @Author: windys
 * @Description: 评论输入框
 * @Date: 2022-02-19 16:34:09
-->
<template>
  <div class="CommentText_page">
    <input v-model="text" type="text" />
    <van-button type="primary" round @click="handleSendText">评论</van-button>
  </div>
</template>

<script >
import { Toast } from "vant";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup(props, { emit }) {
    const text = ref("");
    const clear = () => {
      text.value = "";
    };
    const handleSendText = () => {
      
      if (text.value) {
        emit("handleSendText", text.value);
      } else {
        Toast.fail("请输入文字");
      }
    };
    return {
      text,
      clear,
      handleSendText,
    };
  },
});
</script>



<style lang="scss" scoped>
.CommentText_page {
  position: fixed;
  width: 100%;
  height: 40px;
  bottom: 0;
  background: #ffffff;
  display: flex;
  line-height: 40px;
  flex-direction: row;
  justify-content: center;
  padding: 10px 0;
  box-shadow: -2px -2px 0px rgba(167, 157, 157, 0.144);
  input {
    height: 30px;
    line-height: 30px;
    outline: none;
    width: 220px;
    border-radius: 30px;
    border: 1px solid #dad6d6;
    font-size: 14px;
  }
  button {
    height: 40px;
    margin-left: 10px;
    width: 100px;
  }
}
</style>